<template>
	<view class="page_content">

		<!-- 分时电价查询 -->
		<!-- <u-gap bgColor="transparent" height="10"></u-gap> -->
		<view class="cell-page">
			<text class="cell-page_title">
				<u-cell title="分时电价查询" icon="/static/images/common/icon_electrovalency_select.png"></u-cell>
			</text>
			<u-cell-group>
				<u-cell title="地区" :value="form1.address" :isLink="true" @click="form1.isShowAddress = true"></u-cell>
				<u-cell title="用电分类" :value="form1.electricityCate" :isLink="true"
					@click="form1.isShowElectricityCate = true"></u-cell>
				<u-cell title="用电类型" :value="form1.electricityType" :isLink="true"
					@click="form1.isShowElectricityType = true"></u-cell>
				<u-cell title="电压接入等级" :value="form1.voltageClasses" :isLink="true"
					@click="form1.isShowvoltageClasses = true"></u-cell>
				<u-cell title="月份选择" :value="form1.showMonth" :isLink="true" @click="form1.isShowMonth = true"></u-cell>
			</u-cell-group>
		</view>
		<!-- 工商储收益测算 -->
		<u-gap bgColor="transparent" height="10"></u-gap>
		<view class="cell-page">
			<text class="cell-page_title">
				<u-cell title="工商储收益测算" icon="/static/images/common/icon_analyse_select.png"></u-cell>
			</text>
			<u-cell-group>
				<u-cell title="地区" value="内容" :isLink="true"></u-cell>
				<u-cell title="用电分类" value="内容" :isLink="true"></u-cell>
				<u-cell title="用电类型" value="内容" :isLink="true"></u-cell>
				<u-cell title="电压接入等级" value="内容" :isLink="true"></u-cell>
				<u-cell title="月份选择" value="内容" :isLink="true"></u-cell>
			</u-cell-group>
		</view>
		<u-gap bgColor="transparent" height="10"></u-gap>
		<u-button text="收益测算" size="large" type="success" color="#00c6c1"></u-button>
		<!-- 省份 -->
		<u-picker :show="form1.isShowAddress" :columns="form1.showAddress" :defaultIndex="form1.addressDefaultIndex"
			@cancel="form1.isShowAddress = false" @close="form1.isShowAddress = false"
			@confirm="(e) => {form1.address = e.value[0];form1.isShowAddress = false}" closeOnClickOverlay></u-picker>
		<!-- 用电分类-->
		<u-picker :show="form1.isShowElectricityCate" :columns="form1.showElectricityCate"
			:defaultIndex="form1.electricityCateDefaultIndex" @cancel="form1.isShowElectricityCate = false"
			@close="form1.isShowElectricityCate = false"
			@confirm="(e) => {form1.electricityCate = e.value[0]['dict_name'];form1.isShowElectricityCate = false}"
			keyName="dict_name" closeOnClickOverlay></u-picker>

		<!-- 用电类型-->
		<u-picker :show="form1.isShowElectricityType" :columns="form1.showElectricityType"
			:defaultIndex="form1.electricityTypeDefaultIndex" @cancel="form1.isShowElectricityType = false"
			@close="form1.isShowElectricityType = false"
			@confirm="(e) => {form1.electricityType = e.value[0]['dict_name'];form1.isShowElectricityType = false}"
			keyName="dict_name" closeOnClickOverlay></u-picker>
		<!-- 电压等级-->
		<u-picker :show="form1.isShowvoltageClasses" :columns="form1.showvoltageClasses"
			:defaultIndex="form1.voltageClassesDefaultIndex" @cancel="form1.isShowvoltageClasses = false"
			@close="form1.isShowvoltageClasses = false"
			@confirm="(e) => {form1.voltageClasses = e.value[0]['dict_name'];form1.isShowvoltageClasses = false}"
			keyName="dict_name" closeOnClickOverlay></u-picker>

		<!-- 选择月份 -->
		<u-datetime-picker :show="form1.isShowMonth" v-model="form1.month" mode="year-month" closeOnClickOverlay
			@confirm="confirm" @cancel="form1.isShowMonth = false"
			@close="form1.isShowMonth = false"></u-datetime-picker>




	</view>
</template>
<script>
	export default {
		data() {
			return {
				form1: {
					// 地区选择
					address: "山东省",
					showAddress: [
						["山东省", "吉林省", "福建省"]
					],
					isShowAddress: false, // 是否显示月份
					addressDefaultIndex: [0], // 默认选中		
					// 用电分类
					electricityCate: "单一制",
					showElectricityCate: [
						[{
							dict_name: "单一制",
							dict_value: "1",
						}, {
							dict_name: "两部制",
							dict_value: "2",
						}, ]
					],
					isShowElectricityCate: false, // 是否显示
					electricityCateDefaultIndex: [0], // 默认选中
					// 用电类型
					electricityType: "一般工商业",
					showElectricityType: [
						[{
							dict_name: "一般工商业",
							dict_value: "1",
						}, {
							dict_name: "大工业",
							dict_value: "2",
						}, ]
					],
					isShowElectricityType: false, // 是否显示
					electricityTypeDefaultIndex: [0], // 默认选中	
					// 电压等级
					voltageClasses: "不满1千伏",
					showvoltageClasses: [
						[{
								dict_name: "不满1千伏",
								dict_value: "1",
							},
							{
								dict_name: "1-10千伏",
								dict_value: "2",
							},
							{
								dict_name: "35千伏及以上",
								dict_value: "3",
							},
							{
								dict_name: "1-10千伏",
								dict_value: "4",
							},
							{
								dict_name: "35-110千伏以下",
								dict_value: "5",
							},
							{
								dict_name: "110-220千伏以下",
								dict_value: "6",
							},
							{
								dict_name: "220千伏及以上",
								dict_value: "7",
							},
						],

					],
					isShowvoltageClasses: false, // 是否显示
					voltageClassesDefaultIndex: [0], // 默认选中
					// 月份选择
					month: Number(new Date()), // 实际取值
					showMonth: uni.$u.timeFormat(Number(new Date()), "yyyy-mm"), // 在界面上显示的数据
					isShowMonth: false, // 是否显示月份选取器

				},


			}
		},
		onLoad() {

		},
		methods: {
			click() {
				console.log('Cell is clicked.');
			},
			cellClick(type) {
				console.log(type);
				// 选择月份
				if (type === 'selectMonth') {

				}
			},

			confirm(e) {
				console.log("333", e);
				this.result(e.value, e.mode)
			},
			result(time, mode) {
				console.log(time, mode);
				const timeFormat = uni.$u.timeFormat
				const toast = uni.$u.toast
				switch (mode) {
					case 'datetime':
						this.form1.showMonth = timeFormat(time, 'yyyy-mm-dd hh:MM')
						// return toast(timeFormat(time, 'yyyy-mm-dd hh:MM'))
						break;
					case 'date':
						this.form1.showMonth = timeFormat(time, 'yyyy-mm-dd')
						// return toast(timeFormat(time, 'yyyy-mm-dd'))
						break;
					case 'year-month':
						this.form1.showMonth = timeFormat(time, 'yyyy-mm')
						// return toast(timeFormat(time, 'yyyy-mm'))
						break;
					case 'time':
						// this.form1.showMonth = timeFormat(time, 'yyyy-mm-dd hh:MM')
						return toast(time)
						break;
					default:
						return ''

				}
				this.form1.isShowMonth = false
			},
		}
	}
</script>

<style lang="scss">
	.page_content {
		padding: 15rpx;

		.cell-page {
			background: #ffffff;
			border-radius: 10rpx;

			.cell-page_title {}
		}
	}
</style>